<template>
	<qiun-data-charts type="line" :ontouch="true" :opts="state.opts" :chartData="state.chartData" />
</template>

<script setup>
import { watch } from 'vue';

	const props = defineProps({
		info: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	const state = reactive({
		chartData: {},
		//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
		opts: {
			color: ["#0772F9", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [15, 10, 0, 15],
			enableScroll: true,
			legend: {},
			xAxis: {
				disableGrid: true,
				itemCount:15
			},
			yAxis: {
				gridType: "dash",
				dashLength: 2
			},
			extra: {
				line: {
					type: "straight",
					width: 2,
					activeType: "hollow"
				}
			}
		}
	})
	watch(() => props.info, info => {
		getServerData()
	},{deep:true,immediate:true})

	function getServerData() {
		//模拟从服务器获取数据时的延时
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				categories: props.info?.x_arr || [],
				series: [{
						name: "业绩",
						data: props.info?.yeji_arr || []
					}
				]
			};
			state.chartData = JSON.parse(JSON.stringify(res));
		}, 500);
	}
</script>

<style>
</style>